 <template>
  <div>
    <section class="sto">
      <div>
        <h2>正在进行</h2>
        <span>{{ get }}</span>
      </div>
      <div>
        <h2>已经完成</h2>
        <span>{{arr.length-get}}</span>
      </div>
      <ul id="donelist">
        <li
          v-for="(item, index) in arr"
          v-if="item.checked == false"
          :key="index"
          v-show="item.c == false"
        >
          <input type="checkbox" v-model="item.checked" >
          <span @dblclick="sj(item)">{{ item.name }}</span>
          <input
            type="text"
            id="sj"
            @keydown.13="d(item)"
            v-model="str"
            v-if="item.check"
          />
          <i @click="del(item)"></i>
        </li>
      </ul>
      <ul id="list">
        <li
          v-for="(item, index) in arr"
          v-if="item.checked == true"
          :key="index"
          v-show="item.d"
        >
          <input type="checkbox" v-model="item.checked" >
          {{ item.name }}
          <i @click="dell(item)"></i>
        </li>
      </ul>
    </section>
  </div>
</template>
 <script>
export default {
  props: ["arr","get","get2"],
  data() {
    return {};
  },
  methods: {
    d(item) {
      item.name = this.str;
      item.check = false;
    },
    dell(item) {
    item.d = false;
      for(var i=0; i<this.arr.length; i++){
          this.arr.splice(i,1)
       }
    },
    del(item) {
       item.c = true;
       for(var i=0; i<this.arr.length; i++){
          this.arr.splice(i,1)
       }
    },
    sj(item) {
      item.check = true;
      item.name = "";
      this.str = "";
    },
  },
  computed: {
  },
};
</script>
 <style lang='css'>
</style>